<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>工序待生产</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="surplus-quantity">
      <div>
        <el-form inline size="medium">
          <el-form-item label="工序">
            <el-cascader filterable class="work-procedure" v-model="workProcedure" :options="workProcedureList" separator="-">
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">查询</el-button>
            <el-button type="primary" @click="exportExcel">导出excel</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="orderList!==null" style="margin-bottom:10px">
        该工序待生产总数：{{sumNonQuality}}
      </div>
      <div class="surplus-quantity-table-div">
        <div class="no-data" v-if="orderList===null">
          <div>请选择工序，点击“查询”按钮查询相应工序的待生产数量</div>
        </div>
        <template v-else>
          <el-table ref="orderTable" fit border :data="orderList" style="width: 100%" height="parent" empty-text="该工序暂无剩余生产数量">
            <filter-table-column sortable label="订单编号" prop="companyOrderId" min-width="180px" header-align="center">
            </filter-table-column>
            <filter-table-column sortable label="系统订单编号" prop="orderId" min-width="150px" header-align="center">
            </filter-table-column>
            <filter-table-column sortable label="工厂型号" prop="factoryId" min-width="120px" header-align="center">
            </filter-table-column>
            <filter-table-column sortable label="客户型号" prop="customerId" min-width="120px" header-align="center">
            </filter-table-column>
            <filter-table-column sortable label="客户订单号" prop="customerOrderId" min-width="130px" header-align="center">
            </filter-table-column>
            <el-table-column sortable label="订单数" prop="orderCount" min-width="100px" align="center"></el-table-column>
            <el-table-column sortable label="投料数" prop="feedCount" min-width="100px" align="center"></el-table-column>
            <el-table-column sortable label="已生产数" prop="quality" min-width="100px" align="center"></el-table-column>
            <el-table-column sortable label="待生产数" prop="nonQuality" min-width="100px" align="center"></el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([], [
    "/vueSystem/components/filterTableColumn.js"
  ]);

</script>
<script src="https://upload.shinehao.com.cn/20190523111638xlsx.full.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190523111634xlsx-style.full.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809110727FileSaver.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809110421Blob.js"></script>
<script src="../../static/excel/Export2Excel.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    provide: function () {
      var self = this;
      return {
        tableFun: function(){
          return self.$refs['orderTable'];
        }
      }
    },

    data: function () {
      return {
        loading: false,
        workProcedureList: [],
        workProcedure: [],
        orderList: null,
        sumNonQuality: null,
        tableFilters: {
          companyOrderIdFilters: [],
          orderIdFilters: [],
          factoryIdFilters: [],
          customerIdFilters: [],
          customerOrderIdFilters: []
        }
      };
    },

    created: function () {
      this.setWorkProcedureList();
    },

    methods: {
      setWorkProcedureList: function () {
        this.loading = true;
        var self = this;
        var startTime = moment().valueOf();
        ajaxRequest('basicData/queryProcess', {
          view: 1
        }, false).then(function (res) {
          var processList = res.returnData;
          var processObj = {};
          for (var i = 0; i < processList.length; i++) {
            var processData = processList[i];
            var dept = processData.productionLine;
            processObj[dept] = {
              value: dept,
              label: dept,
              parentId: null
            };

            var workshop = processData.workshopName;
            processObj[`${dept}-${workshop}`] = {
              value: `${dept}-${workshop}`,
              label: workshop,
              parentId: dept
            };

            var processName = processData.processName;
            var id = processData.id;
            processObj[id] = {
              value: id,
              label: processName,
              parentId: `${dept}-${workshop}`
            };
          }

          var processes = [];
          for (var key in processObj) {
            var process = processObj[key];
            var parentId = process.parentId;
            if (parentId !== null) {
              var parentProcess = processObj[parentId];
              if (!parentProcess) {
                continue;
              }

              var children = parentProcess.children;
              if (children === undefined) {
                children = [];
                parentProcess.children = children;
              }
              children.push(process);
            } else {
              processes.push(process);
            }
          }

          self.workProcedureList = processes;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      searchData: function () {
        var workProcedure = this.workProcedure;
        if (workProcedure.length === 0) {
          this.$alert('请选择工序', '信息');
          return;
        }
        var procedureId = workProcedure[workProcedure.length - 1];
        this.loading = true;
        var self = this;
        ajaxRequest('partsProcedure/getProcedureSurplusCount', {
          procedureId: procedureId
        }).then(function (orderList) {
          var sumNonQuality = 0;
          var fields = ['companyOrderId', 'orderId', 'factoryId', 'customerId', 'customerOrderId'];
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            var feedCount = order.feedCount;
            var quality = order.quality;
            var nonQuality = feedCount - quality;
            order.nonQuality = nonQuality;
            sumNonQuality += nonQuality;
          }

          self.orderList = orderList;
          self.sumNonQuality = sumNonQuality;
          self.loading = false;

          if (self.$refs['orderTable'] !== undefined) {
            self.$refs['orderTable'].clearFilter();
          }
        }).catch(function () {
          self.loading = false;
        });
      },

      exportExcel: function () {
        if (this.orderList.length === 0) {
          this.$alert('没有工序待生产数据', '信息');
          return;
        }
        var orderTable = this.$refs['orderTable'];
        if (!orderTable) {
          return;
        }
        var $table = $(orderTable.$el);

        var year = moment().format('YYYYMMDD');
        var self = this;
        export_table_to_excel($table, '工序待生产' + year, {
          sheetName: '工序待生产',
          tableTitle: {
            value: "工序待生产",
            fontSize: 18,
            colspan: 9,
            align: "center"
          },
          colWidth: [180, 150, 120, 120, 130, 100, 100, 100, 100],
          fomratTableRow: function (rows) {
            var $stat = $(`<tr><td colspan="9" style="font-size:16px">该工序待生产总数：${self.sumNonQuality}</td></tr>`);
            var newRows = [$stat[0]];
            newRows.pushArray(rows);
            return newRows;
          }
        });
      }
    },

    components: {
      FilterTableColumn: FilterTableColumn
    }
  });

</script>

<style>
  .surplus-quantity {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .surplus-quantity .el-form-item {
    margin-bottom: 10px;
  }

  .surplus-quantity .work-procedure {
    width: calc(80vw - 200px);
    min-width: 250px;
  }

  .surplus-quantity .surplus-quantity-table-div {
    flex: 1;
    overflow: auto;
    position: relative;
  }

</style>

</html>
